<script setup>
import {ref, inject} from "vue";
import adminCommunal from "@/components/communal/admin-communal.vue";
import {NButton, NSpace,NImage} from 'naive-ui'
import { LeafOutline } from "@vicons/ionicons5";
import {allClass} from "@/res/api/admin_api.js";
import {delClass} from "@/res/api/admin_api.js";
const { toPage} = inject("toPage")
const courseSelect = ref({
  selectValue: null,
})
const rules = ref({

})

let data = ref([]);
// 查询所有课程
allClass({
  pageNum : 1
}).then((res)=>{
  // console.log(res)
  console.log(res.data.list)
  data.value = res.data.list.map(item => ({
    id : item.classData.id,
    upUser : item.userId,
    name:  item.classData.classTitle,
    classImage: item.classData.classImage,
    classNode: item.classData.classNode,
    type :  item.classData.classType,
    state: item.isFinish === 1
        ? "已完成"
        : "未完成",
    btns: ['编辑','下架']
  }))
  console.log(data.value)
})





const generalOptions = ref(['已上架', '未上架', '下架中'].map(
    (v) => ({
      label: v,
      value: v
    })
))
//数据表格
const createColumns = ({
                         ban,
                         edit,
                         shelf
                       }) => [
  {
    type: "selection",
    fixed: "left"
  },
  {
    title: "id",
    key: "id",
    fixed: "left",
    width: 150,
  },
  {
    title: "课程名称",
    key: "name",
    fixed: "left",
    width: 150,
  },
  {
    title: "课程封面",
    key: "classImage",
    render(row) {
      return h(
            NImage,
          {
            src:row.classImage,
            width: 72,
            'preview-disabled': true
          },
          {
            default: ()=>{}
          }

      )
    }
  },
  {
    title: "课程状态",
    key: "state"
  },
  {
    title: "课程节点",
    key: "classNode"
  },
  {
    title: "课程类型",
    key: "type"
  },
  {
    title: "上传人员",
    key: "upUser"
  },
  {
    title: "管理员操作",
    key: "action",
    width: 200,
    fixed: "right",
    render(row) {
      return h(
          NSpace,
          {

          },
          {
            default: row.btns.map((btnKey)=>{
              return h(
                  NButton,
                  {
                    text: true,
                    type: 'info',
                    onClick: () => {
                      if(btnKey==='封禁'){
                        return ban(row)
                      }else if(btnKey==='编辑'){
                        return edit(row)
                      }else {
                        return shelf(row)
                      }
                    }
                  },
                  {
                    default: ()=> btnKey
                  }
              )
            })
          }
      )
    }
  }
];
const columns= createColumns({

  edit(row) {

    alert("编辑")

  },
  shelf(row) {
    delClass({
      id : row.id
    }).then((res)=>{
      alert(res.message)
      window.location.reload()
    })



  }

})
// const data = Array.from({ length: 46 });

// const createDate = data.map((item,index)=>({
//   name: `Edward King ${index}`,
//   cover: '9846513',
//   state: '1596',
//   num: '852',
//   type: '4569',
//   upUser: '852',
//   btns: ['封禁','编辑','下架']
// }))

let pagination= {
  pageSize: 8
}
const checkedRowKeysRef = ref([]);
const rowKey= (row) => row.name
function handleCheck(rowKeys) {
  checkedRowKeysRef.value = rowKeys;
}
</script>

<template>
  <admin-communal>
<!--    面包屑-->
      <n-breadcrumb style="margin-bottom: 1rem">
        <n-breadcrumb-item>
          <n-icon :component="LeafOutline" /> linter-Ai</n-breadcrumb-item>
<!--        <n-breadcrumb-item>-->
<!--          <n-icon :component="LeafOutline" /> 天津分行</n-breadcrumb-item>-->
        <n-breadcrumb-item>
          <n-icon :component="LeafOutline" /> 课程管理 </n-breadcrumb-item>
      </n-breadcrumb>
<!--    筛选栏-->
    <n-card style="margin-bottom: 1rem">
      <n-form inline
              label-placement="left"
              ref="formRef"
              :model="courseSelect"
              :rules="rules"
              label-width="auto"
      >
        <n-form-item label="上传时间:">
          <n-input></n-input>
        </n-form-item>
        <n-form-item label="上架状态" path="selectValue">
          <n-select
              style="width: 10rem"
              v-model:value="courseSelect.selectValue"
              placeholder="Select"
              :options="generalOptions"
          />
        </n-form-item>
        <n-form-item label="上传者:">
          <n-input></n-input>
        </n-form-item>
        <n-form-item label="课程名称:">
          <n-input></n-input>
        </n-form-item>
      </n-form>
    </n-card>
    <n-card>
      <n-space justify="space-between">
        <n-p style="font-weight: bold;font-size: 1rem">课程列表</n-p>
        <n-button type="info" @click="toPage('admin/course/add')">添加课程</n-button>
      </n-space>
      <n-space v-if="data" vertical>
        <n-p> 你选中了 {{ checkedRowKeysRef.length }} 行。 </n-p>
        <n-data-table
            :columns="columns"
            :data="data"
            :pagination="pagination"
            :row-key="rowKey"
            @update:checked-row-keys="handleCheck"
            :scroll-x="1800"
            :bordered="false"
            :single-line="false"
            single-column
        />
      </n-space>
     <n-empty v-else description="你什么也找不到"/>
    </n-card>
  </admin-communal>
</template>

<style scoped>

</style>